<template>
    <div class="distribution">
        <div style="position: fixed;width: 100%;background: #fff;z-index: 99;">
            <bar text="业态分布"></bar>
        </div>
        <!--四个模块-->
        <div class="topNav">
            <div v-for="item in topList" class="topDetail">
                <div class="topDetail-txt">
                    <p>{{item.brands}}</p>
                    <img :src="item.picUrl" alt="">
                </div>
                <p class="topDetail-num">{{item.amount}} <span>家</span></p>
            </div>
        </div>
        <!--品牌列表-->
        <div class="list">
            <div class="listTitle">
                <titles text="品牌列表"></titles>
                <div >
                    <el-select v-model="value" placeholder="品牌类型" @change="btnType(value)">
                        <el-option
                                v-for="item in brandList"
                                :key="item.fid"
                                :label="item.name"
                                :value="item.fid">
                        </el-option>
                    </el-select>

                </div>
                <div style="margin-left: -20px;">
                    <el-select v-model="value2" placeholder="选择楼层" @change="btnType2(value2)">
                        <el-option
                                v-for="item in brandType"
                                :key="item.floor"
                                :label="item.name"
                                :value="item.floor">
                        </el-option>
                    </el-select>
                </div>
            </div>
            <!--列表-->
            <div class="listBox">
                <div v-for="item in list" class="listDetail">
                    <img :src="item.picurl" alt="">
                    <p>{{item.brand}}</p>
                </div>
            </div>

        </div>
    </div>
</template>

<script>
    import titles from "../../components/titleBar";
    import bar from "../../components/topBar";
    export default {
        props: {},
        components: {
            titles,
            bar
        },
        name: "distribution",
        data() {
            return {
                brandList:[
                    {
                        name:'全部',
                        fid:0
                    },
                    {
                        name:'服装',
                        fid:600004
                    },
                    {
                        name:'鞋子',
                        fid:110000
                    },
                    {
                        name:'餐饮',
                        fid:170000
                    },
                    {
                        name:'药店',
                        fid:600007
                    },
                    {
                        name:'美妆',
                        fid:600005
                    },
                    {
                        name:'珠宝首饰',
                        fid:180200
                    },
                    {
                        name:'休闲娱乐',
                        fid:160000
                    },
                    {
                        name:'美容美发',
                        fid:190700
                    },
                    {
                        name:'数码电子',
                        fid:140106
                    }
                ],
                value: '',
                brandType:[
                    {
                        name:'全部',
                        floor:'0'
                    },
                    {
                        name:'F1',
                        floor:'2'
                    },
                    {
                        name:'F2',
                        floor:'3'
                    },
                    {
                        name:'F3',
                        floor:'4'
                    },
                    {
                        name:'F4',
                        floor:'4'
                    },
                ],
                value2:'',
                list:[],
                count: 50,
                loading: false,
                topList:[]
            };
        },
        computed: {

        },
        created() {},
        mounted() {
            this.handleCommand();
            this.top()
        },
        methods: {
            top(){
                this.$api.get('market/data/formatdistri',  {},response => {
                    if (response.status >= 200 && response.status < 300) {
                        // console.log(response.data.data);
                        this.topList = response.data.data
                        //请求成功，response为成功信息参数
                    } else {
                        console.log(response.message);
                        //请求失败，response为失败信息
                    }
                });
            },
            handleCommand(command) {
                this.$api.get('market/data/brandlist?format=0&floor=0&page=1',  {},response => {
                    if (response.status >= 200 && response.status < 300) {
                        // console.log(response.data.data);
                        this.list = response.data.data
                        //请求成功，response为成功信息参数
                    } else {
                        console.log(response.message);
                        //请求失败，response为失败信息
                    }
                });
            },
            btnType(fid){
                // alert(fid)

                if(this.value2 == ''){
                    var value2 = 0
                }else {
                    var value2 = this.value2
                }
                this.$api.get('market/data/brandlist?format='+fid+'&floor='+value2+'&page=1',  {},response => {
                    if (response.status >= 200 && response.status < 300) {
                        // console.log(response.data.data);
                        this.list = response.data.data
                        //请求成功，response为成功信息参数
                    } else {
                        console.log(response.message);
                        //请求失败，response为失败信息
                    }
                });
            },
            btnType2(value2){

                if(this.value == ''){
                    var value = 0
                }else {
                    var value = this.value
                }
                this.$api.get('market/data/brandlist?format='+value+'&floor='+value2+'&page=1',  {},response => {
                    if (response.status >= 200 && response.status < 300) {
                        // console.log(response.data.data);
                        this.list = response.data.data
                        //请求成功，response为成功信息参数
                    } else {
                        console.log(response.message);
                        //请求失败，response为失败信息
                    }
                });
            }
        },
        metaInfo: {
            title: 'This is the test',
            meta: [
                { charset: 'utf-8' },
                { name: 'viewport', content: 'width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=2,user-scalable=yes' }
            ]
        }
    };
</script>

<style scoped lang="scss">
    p{
        text-align: left;
    }
    /deep/.el-input--suffix .el-input__inner{
        width: 110px;
        height: 26px;
        margin-left: 28px;
        font-size: 16px;
        line-height: 26px;
    }
    /deep/.el-select-dropdown{
        min-width: 110px !important;
        left: 110px !important;
    }
    /deep/.el-input__suffix{
        margin-top: 8px;
    }
    /deep/.el-select .el-input .el-select__caret.is-reverse{
        margin-top: -14px;
    }
    /*下拉选框*/
    .el-dropdown-link {
        cursor: pointer;
        color: #666666;
    }
    .el-icon-arrow-down {
        font-size: 12px;
    }
.distribution{
    .topNav{
        padding-top: 70px;
        display: flex;
        margin: 0 6px 18px 12px;
        flex-warp:warp; /*CSS3样式，支持webkit，ms*/
        -ms-flex-wrap: wrap;/*IE9以及一下不支持*/
        -webkit-flex-wrap: wrap;
        .topDetail{
            width: 80px;
            height: 60px;
            background: #F8F8F9;
            border-radius: 8px;
            margin-right: 9px;
            margin-bottom: 10px;
            .topDetail-txt{
                display: flex;
                align-items: center;
                margin-top: 10px;
                p{
                    color: #333333;
                    font-size: 12px;
                    margin-left: 9px;
                    flex: 1;
                    text-align: left;
                }
                img{
                    width: 14px;
                    height: 14px;
                    margin-right: 9px;
                }
            }
            .topDetail-num{
                font-size: 20px;
                color: #333333;
                margin-top: 9px;margin-left: 9px;
                font-weight: 600;
                span{
                    font-size: 10px;
                    font-weight: 400;
                }
            }
        }
    }
    /*品牌列表*/
    .list{
        border-top: 5px solid #F4F4F4;
        width: 100%;
        .listTitle{
            display: flex;
            align-items: center;
            margin-top: 22px;
            margin-left: 15px;
        }
        .listBox{
            display:flex;
            flex-warp:warp; /*CSS3样式，支持webkit，ms*/
            -ms-flex-wrap: wrap;/*IE9以及一下不支持*/
            -webkit-flex-wrap: wrap;
            margin-top: 24px;margin-left: 14px;margin-right: 7px;
            .listDetail{
                margin-bottom: 16px;
                margin-right: 7px;
                text-align: center;
                width: 110px;
                img{
                    width: 110px;
                    height: 76px;
                    background: #fcf8e3;
                }
                p{
                    color: #666666;
                    font-size: 12px;
                    margin-top: 4px;
                    text-align: center;
                }
            }
        }
    }
}
</style>
